<template>
	<SecondTitle title="各类设备耗能占比" />
	<div class="pipe">
		<ProportionPipe1 :data="data" :legendLineHeight="40" />
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import * as echarts from 'echarts'

	import ProportionPipe1 from './ProportionPipe1.vue'
	import { requireImg } from '../../../utils/common'
	const data = ref([
		{
			value: 114,
			name: '照明',
			icon: 'image://' + requireImg('global/pipe-legend1.png'),
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: 'rgba(15, 84, 153, 0.396)',
						},
						{
							offset: 1,
							color: 'rgba(115, 208, 255, 1)',
						},
					],
					false,
				), // 渐变
			},
		},
		{
			value: 71,
			name: '通风',
			icon: 'image://' + requireImg('global/pipe-legend2.png'),
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: 'rgba(77, 255, 181, 1)',
						},
						{
							offset: 1,
							color: 'rgba(11, 77, 44, 1)',
						},
					],
					false,
				), // 渐变
			},
		},
		{
			value: 80,
			name: '制冷',
			icon: 'image://' + requireImg('global/pipe-legend3.png'),
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: 'rgba(229, 229, 229, 1)',
						},
						{
							offset: 1,
							color: 'rgba(117, 117, 117, 1)',
						},
					],
					false,
				), // 渐变
			},
		},
		{
			value: 75,
			name: '监控',
			icon: 'image://' + requireImg('global/pipe-legend4.png'),
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: 'rgba(255, 200, 89, 1)',
						},
						{
							offset: 1,
							color: 'rgba(153, 105, 38, 1)',
						},
					],
					false,
				), // 渐变
			},
		},
		{
			value: 75,
			name: '其他',
			icon: 'image://' + requireImg('global/pipe-legend5.png'),
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					1,
					0,
					0,
					0,
					[
						{
							offset: 0,
							color: 'rgba(153, 38, 38, 1)',
						},
						{
							offset: 1,
							color: 'rgba(255, 148, 148, 1)',
						},
					],
					false,
				), // 渐变
			},
		},
	])
</script>

<style lang="scss" scoped>
	.pipe {
		margin-top: 100px;
	}
</style>
